<template>
    <div class="tkyx" v-show="shoeb">
        <div class="cover"></div>
        <div id="regBox">
            <div class="btnx" @click="btnnn">X</div>
            <ul>
                <li class="zcbox1">
                    <div class="zcbox">
                        <h3>登录</h3>
                        <a href="#">其他登录方式</a>
                    </div>
                </li>
                <li class="towinput">
                    <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px"
                        class="demo-ruleForm">
                        <el-form-item label="" prop="phone">
                            <el-input v-model="ruleForm. phone" type="tel" autocomplete="off" placeholder="手机号" />
                        </el-form-item>
                        <div class="yzmMss">
                            <el-form-item label="" prop="code">
                                <el-input v-model="ruleForm.code" autocomplete="off" placeholder="验证码"></el-input>
                            </el-form-item>
                        </div>

                        <div class="tjiao">
                            <el-button @click="sendCode" v-show="show">获取验证码</el-button>
                            <el-button disabled='isDisabled' v-show="!show" class="blue">{{count}}秒后重新发送</el-button>
                        </div>
                        <div class="czyz">
                            <el-form-item>
                                <el-button type="primary" @click="submitForm">登录</el-button>
                                <el-button @click="resetForm">重置</el-button>
                            </el-form-item>
                        </div>


                    </el-form>
                </li>
            </ul>
        </div>

    </div>

</template>
<script lang="ts">
import { ElMessage } from 'element-plus'
import { getcode, phoneMessageLogin } from '@/utils/api';
import { FormInstance } from 'element-plus';
import { defineComponent } from 'vue';
export default defineComponent({
    data() {
        //输入手机号
        const validatePhone = ( value: any, callback: any) => {
            if (value === '') {
                callback(new Error('请输入手机号'))
            } else if (!/^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/.test(value)) {
                callback(new Error('手机号不合法'))
            } else {
                callback()
            }

        }
        //短信验证码获取验证码
        const checkSmscode = (rule: any, value: any, callback: any) => {
            if (value === '') {
                callback(new Error('请输入验证码'))
            } else {
                callback()
            }
        }

        return {
            shoeb: true,
            count: 0,//倒计时获取验证码
            sid: 0,
            show: true,
            labelPosition: '',
            ruleForm: {
                phone: '',
                code: '',

            },
            rules: {
                phone: [{ validator: validatePhone, trigger: 'blur' }],
                code: [{ validator: checkSmscode, trigger: 'blur' }],
            },
        }
    },
    methods: {
        btnnn() {
            this.shoeb = false
        },
        //发送验证码
        sendCode() {
            getcode(this.ruleForm.phone).then((res) => {
                if (res.status == 200) {
                    const num = 10;
                    if (!this.sid) {
                        this.count = num;
                        this.show = false;
                        this.sid = window.setInterval(() => {
                            if (this.count > 0 && this.count <= num) {
                                this.count--;
                            } else {
                                this.show = true;
                                clearInterval(this.sid);
                                this.sid = 0;
                            }
                        }, 1000);
                    }
                    //从服务器拿回来的验证码
                    // this.codeYzm = res.data.check

                } else {
                    alert('信息有误')
                }


            }).catch(function (error: any) {
                console.log(error);
            });
        },
        //重置
        resetForm() {
            const formEl = this.$refs.ruleFormRef as FormInstance;
            if (!formEl) return
            formEl.resetFields()
        },
        //提交
        submitForm() {
            const formEl = this.$refs.ruleFormRef as FormInstance;
            if (!formEl) return;
            formEl.validate((valid) => {
                if (valid) {
                    //进行正常的ajax处理的
                    phoneMessageLogin(this.ruleForm).catch((res: any) => {
                        console.log(res);
                        if (res.data.code == 1) {
                            ElMessage({
                                message: '修改成功',
                                type: 'success',
                            })
                        } else {
                            alert(res.data.msg)
                            setTimeout(() => {
                                this.shoeb = false
                            }, 2000);
                        }
                    }).then((err: any) => {
                        console.log(err);
                    })
                } else {
                    return false;
                }
            })
        },
    },
    components: {
    },
})
</script>

<style lang="scss" scoped>
.btnx {
    font-size: 15px;
    font-weight: 600;
    position: relative;
    top: 0px;
    line-height: 20px;
    text-align: center;
    right: 0px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid #999;
    cursor: pointer;

}

.czyz {
    margin-left: 19px;
    margin-bottom: 30px;
}

.cover {
    /*固定定位*/
    position: fixed;
    /*上下左右都为0*/
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    /*背景颜色*/
    background-color: rgb(0, 0, 0);
    opacity: 0.2;
    // background-image: url(../../assets/888.webp);
    // background-repeat: no-repeat;
    // background-size: 100%;
    /*模态框*/
    z-index: 99;
}

#regBox {
    background-color: #fff;
    width: 450px;
    /*固定定位*/
    position: fixed;
    /*从左往右占50%*/
    left: 50%;
    /*从上到下占50%*/
    top: 30%;
    /*模态框*/
    z-index: 100;
    /*从右往左移动*/
    margin-left: -200px;
    /*从下往上移动*/
    margin-top: -100px;

}

:deep(.el-button) {
    >span {
        text-align: center;
    }
}

.zcbox1 {
    margin-left: 18px;
    width: 350px;

    >.zcbox {
        position: relative;
        margin-top: 20px;
        width: 300px;
        display: flex;
        justify-content: space-between;

        h3 {
            margin-left: 73px;
            height: 35px;
            line-height: 35px;
            font-size: 30px;
            color: #666;
            font-weight: 500;
            overflow: hidden;
        }

        a {
            position: absolute;
            bottom: 2px;
            right: -50px;
            display: inline-block;
            height: 20px;
            line-height: 20px;
            text-align: center;
            margin-left: 20px;
            cursor: pointer;
            font-size: 14px;
            color: #999;
            font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Noto Sans CJK SC, Lantinghei SC, Microsoft YaHei, WenQuanYi Micro Hei, Arial, sans-serif;
        }
    }
}

.el-form-item {
    margin-bottom: 9px;
    margin-right: 10px;

}

:deep(.el-input) {
    height: 35px;
    margin-top: 10px;
    margin-right: 60px;
    outline: none;
    font-family: Arial, Helvetica, sans-serif;
    border: none;
    background: none;
    vertical-align: middle;
}

.towinput {
    position: relative;
}

.tjiao {
    position: relative;
    top: -20px;
    right: -273px;
    width: 120px;
    height: 34px;
}

.yzmMss {
    width: 335px;
    height: 30px;
}
</style>